<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="true" class="demand_box" size='600px' @close="resetForm('addVideoMultiSzForm')">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">创建多个需求</span>
                <span class="icon_btn icon_btn_32"><img src="@/assets/img/close_check.svg" alt="" @click="resetForm('addVideoMultiSzForm')"></span>
            </div>
            <div class="demand_center flex">
                <el-form 
                label-position="left" 
                :model="addVideoMultiSzForm" 
                :hide-required-asterisk='true' 
                ref="addVideoMultiSzForm" 
                :rules="addVideoMultiSzRules"
                label-width="110px"
                class="dialog_form">
                   <div class="part_1">
                        <div class="part_title" data-require>产品信息</div>
                        <div class="part_1_form">
                        <div class="flexbox flexcenter dualform">
                            <el-form-item label="品牌产品"  prop="brand_id" :rules="{ required: true, message: '品牌不能为空', trigger:['change','blur']}">
                                <el-select v-model="addVideoMultiSzForm.brand_id" filterable placeholder="选择品牌" size="small" @change="addVideoMultiSzForm.product_id = ''">
                                <el-option :label="item.brand_name" :value="item.brand_id" v-for="item in bplist" :key="item.brand_id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="product_id" :rules="{ required: true, message: '产品不能为空', trigger: ['change','blur']}">
                            <el-select v-model="addVideoMultiSzForm.product_id" filterable placeholder="选择产品" size="small" :disabled="!addVideoMultiSzForm.brand_id" style="margin-left:12px;" >
                                <el-option :label="item.product_name" :value="item.product_id" v-for="item in filterBplist(addVideoMultiSzForm.brand_id)" :key="item.product_id"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item label="投放渠道" prop="channel" :rules="{ required: true, message: '渠道不能为空', trigger: ['change','blur']}">
                            <el-select v-model="addVideoMultiSzForm.channel" placeholder="选择投放渠道" size="small" @change="addVideoMultiSzForm.channel != 1 && (addVideoMultiSzForm.business_scene = 5)">
                            <el-option label="千川" :value="1"></el-option>
                            <el-option label="UD" :value="2"></el-option>
                            <el-option label="巨量" :value="3"></el-option>
                            <el-option label="腾讯" :value="4"></el-option>
                            <el-option label="TK" :value="5"></el-option>
                            <el-option label="京易投" :value="6"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="业务场景"  prop="business_scene" :rules="{ required: true, message: '场景不能为空', trigger: 'blur'}">
                            <el-radio-group v-model="addVideoMultiSzForm.business_scene" size="mini">
                                <el-radio-button :class="{is_radio_show:addVideoMultiSzForm.channel != 1}" label="5">短视频</el-radio-button>
                                <el-radio-button label="6" v-if="addVideoMultiSzForm.channel == 1">直播</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        </div>
                   </div>
                   <div class="part_2">
                        <div class="part_title" data-require>添加需求</div>
                        <div class="part_2_form">
                            <div class="part_2_inside" v-for="(item,index) in addVideoMultiSzForm.demand_list" :key="index">
                                <div class="part_2_form_item_title flexbox flexcenter flexbetween">
                                    <span>需求{{index + 1}}</span>
                                    <svg @click="removeForm(item)" style="cursor:pointer" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M6 5.5L6.53333 2.5H13.4667L14 5.5" stroke="#B4B7BD" stroke-width="1.6" stroke-linejoin="round"/><path d="M3 5.5H17" stroke="#B4B7BD" stroke-width="1.68421" stroke-linecap="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 5.5L14.2308 17.5H5.76923L5 5.5H15Z" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 14H12" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round"/></svg>
                                </div>
                                 <el-form-item :prop="`demand_list.${index}.designer_uid`" label="平面" :rules="{required: true, message: '请选择', trigger: ['blur','change']}">
                                    <el-select v-model="item.designer_uid" filterable placeholder="请选择平面" size="small">
                                        <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="核心创意人" :prop="`demand_list.${index}.centre_uid`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}">
                                    <el-select v-model="item.centre_uid" filterable placeholder="请选择核心创意人" size="small">
                                        <el-option label="默认剪辑" :value="0"></el-option>
                                        <el-option :label="item.nickname" :value="item.id" v-for="item in centreList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item> -->
                                <el-form-item label="截止日期" :prop="`demand_list.${index}.closing_date`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}">
                                <div class="flexbox" style="gap:12px">
                                    <div 
                                    class="date_day"
                                    :class="{'date_day_active':item.closing_date == items.value}"
                                    v-for="items in date_day" :key="items.value"  
                                    @click="item.closing_date = items.value">
                                    {{items.label}}
                                    </div>
                                </div>
                            </el-form-item>
                                <el-form-item label="需求信息" :prop="`demand_list.${index}.description`">
                                    <el-input type="textarea" :rows="3" placeholder="请输入需求信息" v-model="item.description" ></el-input>
                                </el-form-item>
                            </div>
                            <div class="add-form flexbox flexcenter" @click="addList">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.8333 4.79183C10.8333 4.33159 10.4602 3.9585 9.99992 3.9585C9.53968 3.9585 9.16658 4.33159 9.16658 4.79183V9.16683H4.79159C4.33135 9.16683 3.95825 9.53993 3.95825 10.0002C3.95825 10.4604 4.33135 10.8335 4.79159 10.8335H9.16658V15.2085C9.16658 15.6687 9.53968 16.0418 9.99992 16.0418C10.4602 16.0418 10.8333 15.6687 10.8333 15.2085V10.8335H15.2083C15.6685 10.8335 16.0416 10.4604 16.0416 10.0002C16.0416 9.53993 15.6685 9.16683 15.2083 9.16683H10.8333V4.79183Z" fill="#5C636C"/></svg>
                                添加
                            </div>
                        </div>
                   </div>
                    <!-- <div v-if="step==1" key="1">
                        <el-form-item label="品牌/产品" prop="short_name">
                            <el-row :gutter="12">
                                <el-col :span="12">
                                    <el-form-item prop="brand_id">
                                        <el-select v-model="brandSelect" placeholder="请选择品牌" filterable value-key='brand_id' style="width:100%" @change="selectBrand">
                                            <el-option :label="item.brand_name+filters.chanelName(item.channel)" :value="item" v-for="item in brandList" :key="item.brand_id">
                                                <span>{{item.brand_name}}{{filters.chanelName(item.channel)}}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="product_id">
                                        <el-select v-model="addVideoMultiSzForm.product_id" placeholder="请选择产品" filterable style="width:100%" :disabled="!addVideoMultiSzForm.brand_id" @change="selectProduct">
                                            <el-option :label="item.name" :value="item.product_id" v-for="item in productList" :key="item.product_id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="业务场景" prop="business_scene">
                            <el-select v-model="addVideoMultiSzForm.business_scene" :disabled="!addVideoMultiSzForm.product_id" placeholder="请选择业务场景" style="width:100%">
                                <el-option :label="item.scene_name" :value="item.business_scene" v-for="item in sceneList" :key="item.business_scene"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div v-else key="2">
                        <div class="step_box flexbox flexcenter flexbetween"> -->
                            <!-- <div class="flexbox flexcenter">
                                需求类型：
                                <span>剪辑需求</span>
                            </div> -->
                            <!-- <div class="flexbox flexcenter">
                                品牌/产品：
                                <span>{{branname}}/{{projectname}}</span>
                            </div>
                            <div class="flexbox flexcenter">
                                业务场景：
                                <span v-if="addVideoMultiSzForm.business_scene==1">短视频原创</span>
                                <span v-else-if="addVideoMultiSzForm.business_scene==2">短视频混剪</span>
                                <span v-else-if="addVideoMultiSzForm.business_scene==3">直播素材</span>
                                <span v-else-if="addVideoMultiSzForm.business_scene==4">直播直投</span>
                                <span v-else-if="addVideoMultiSzForm.business_scene==5">短视频</span>
                                <span v-else-if="addVideoMultiSzForm.business_scene==6">直播</span>
                            </div>
                        </div>
                        <div class="demand_item" v-for="(item,index) in addVideoMultiSzForm.demand_list" :key="index">
                            <div class="demand_top flexbox flexcenter flexbetween">
                                <span class="demand_num">需求 {{index+1}}</span>
                                <div class="demand_btn">
                                    <el-link type="danger" :underline="false" @click="deletList(index)" v-if="addVideoMultiSzForm.demand_list.length>1">删除</el-link>
                                    <el-link type="primary" :underline="false" @click="addList(item)">复制</el-link>
                                </div>
                            </div>
                            <el-row :gutter="12">
                                <el-col :span="12">
                                    <el-form-item :prop="`demand_list.${index}.editor_uid`" label="剪辑" :rules="{required: true, message: '请选择', trigger: ['blur','change']}">
                                        <el-select v-model="item.editor_uid" filterable placeholder="请选择剪辑" style="width:100%">
                                            <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="核心创意人" :prop="`demand_list.${index}.centre_uid`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}">
                                        <el-select v-model="item.centre_uid" filterable placeholder="请选择核心创意人" style="width:100%">
                                            <el-option label="默认剪辑" :value="0"></el-option>
                                            <el-option :label="item.nickname" :value="item.id" v-for="item in centreList" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="截止日期" :prop="`demand_list.${index}.closing_date`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}">
                                <el-select v-model="item.closing_date" placeholder="请选择该需求的截止日期" style="width:100%">
                                    <el-option label="周一" :value="1"></el-option>
                                    <el-option label="周二" :value="2"></el-option>
                                    <el-option label="周三" :value="3"></el-option>
                                    <el-option label="周四" :value="4"></el-option>
                                    <el-option label="周五" :value="5"></el-option>
                                    <el-option label="周六" :value="6"></el-option>
                                    <el-option label="周日" :value="7"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="需求信息" :prop="`demand_list.${index}.description`">
                                <el-input type="textarea" :rows="3" placeholder="请输入需求信息" v-model="item.description">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div> -->
                </el-form>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <template v-if="step==1">
                    <el-button plain size="small" class="el-button-width" @click="resetForm('addVideoMultiSzForm')">取 消</el-button>
                    <el-button type="primary" size="small" class="el-button-width" @click="nextForm('addVideoMultiSzForm')">下一步</el-button>
                </template>
                <template v-else>
                    <el-button plain size="small" class="el-button-width" @click="step = 1">上一步</el-button>
                    <el-button type="primary" size="small" class="el-button-width" @click="submitForm('addVideoMultiSzForm')" :loading="loading" :disabled='loading'>完成创建</el-button>
                </template>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            bplist:[],
            date_day:[
             {label:"周一",value:1},
             {label:"周二",value:2},
             {label:"周三",value:3},
             {label:"周四",value:4},
             {label:"周五",value:5},
             {label:"周六",value:6},
             {label:"周天",value:7}],
            step: 1,
            loading: false,
            dialogVisible: false,
            brandSelect: {},
            brandList: [], //品牌列表
            productList: [], //产品列表
            sceneList: [], //业务场景列表
            scriptList: [],
            optimiList: [], //优化师列表
            centreList: [], //核心创意人
            branname: "",
            projectname: "",
            addVideoMultiSzForm: {
                year: "",
                week: "",
                brand_id: "",
                product_id: "",
                channel: "",
                business_scene: "5",
                demand_list: [
                    {
                        description: "",
                        closing_date: "",
                        designer_uid: "",
                        // centre_uid: 0,
                    },
                ],
            },
            addVideoMultiSzRules: {
                brand_id: [
                    {
                        required: true,
                        message: "请选择品牌",
                        trigger: ["blur","change"],
                    },
                ],
                product_id: [
                    {
                        required: true,
                        message: "请选择产品",
                        trigger: ["blur","change"],
                    },
                ],
                business_scene: [
                    {
                        required: true,
                        message: "请选择业务场景",
                        trigger: ["blur","change"],
                    },
                ],
            },
        };
    },
    created() {
        this.$bus.on("addPictureMultiSz", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.addVideoMultiSzForm.week = value.week;
            this.addVideoMultiSzForm.year = value.year;
            // this.getBrandList();
            this.getOptimization();
            this.getCentreList();
            this.getBplist()
        });
    },
    beforeDestroy() {
        this.$bus.off("addPictureMultiSz");
    },
    methods: {
        removeForm(item){
            let index = this.addVideoMultiSzForm.demand_list.indexOf(item)
            if (index !== -1) {
                this.addVideoMultiSzForm.demand_list.splice(index, 1)
            }
        },
        //获取品牌列表
        async getBplist(){
            const { data: res } = await this.$http.post("adminapi/brandv2/bpList",{limit:0});
            if (res.code !== 200) {
            return this.$message.error(res.msg);
            } else {
                this.bplist = res.data.list;
            }
        },
        //添加产品-品牌产品-产品选择器需要根据品牌取出数据
        filterBplist(id){
            if(!id)return;
            let arr =  this.bplist.find((e)=> e.brand_id == id)
            if(!arr)return;
            return arr.product;
        },
        //获取品牌列表
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/brandList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data;
            }
        },

        // 获取产品
        async getProductList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/productList",
                {
                    brand_id: this.addVideoMultiSzForm.brand_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.productList = res.data;
            }
        },

        // 获取业务场景
        async getSceneList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneList",
                {
                    brand_id: this.addVideoMultiSzForm.brand_id,
                    product_id: this.addVideoMultiSzForm.product_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.sceneList = res.data;
            }
        },

        // 获取优化师列表
        async getOptimization() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szGraphicList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList = res.data;
            }
        },

        // 获取核心创意人列表
        async getCentreList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szCentreList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.centreList = res.data;
            }
        },

        //品牌选择
        selectBrand() {
            this.addVideoMultiSzForm.brand_id = this.brandSelect.brand_id;
            this.addVideoMultiSzForm.channel = this.brandSelect.channel;
            this.addVideoMultiSzForm.product_id = "";
            this.addVideoMultiSzForm.business_scene = "";
            this.getProductList();
        },

        // 产品选择
        selectProduct() {
            this.addVideoMultiSzForm.business_scene = "";
            this.getSceneList();
        },

        // 下一步
        nextForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.step = 2;
                    this.branname = this.brandName();
                    this.projectname = this.projectName();
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/Demandszv2/pictureBatchAdd",
                        this.addVideoMultiSzForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "创建成功",
                            type: "success",
                        });
                        this.loading = false;
                        this.resetForm(formName);
                        this.$parent.getDataList(1);
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 添加列表
        addList() {
            this.addVideoMultiSzForm.demand_list.push({
                description: "",
                closing_date: "",
                designer_uid: "",
                // centre_uid: 0,
            });
        },

        // 删除列表
        deletList(index) {
            this.addVideoMultiSzForm.demand_list.splice(index, 1);
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.step = 1;
            this.brandSelect = {};
            this.addVideoMultiSzForm = {
                year: "",
                week: "",
                brand_id: "",
                product_id: "",
                channel: "",
                business_scene: "5",
                demand_list: [
                    {
                        description: "",
                        closing_date: "",
                        editor_uid: "",
                        // centre_uid: 0,
                    },
                ],
            };
            this.dialogVisible = false;
        },

        brandName() {
            let arr = this.brandList.filter((item) => {
                if (item.brand_id == this.addVideoMultiSzForm.brand_id) {
                    return item;
                }
            });
            return arr[0].brand_name;
        },

        projectName() {
            let arr = this.productList.filter((item) => {
                if (item.product_id == this.addVideoMultiSzForm.product_id) {
                    return item;
                }
            });
            return arr[0].name;
        },
    },
    computed: {},
    components: {},
};
</script>

<style scoped>
/deep/ .el-drawer__header{
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
/deep/ .el-form-item{
  margin-bottom: 12px;
}
/deep/ .el-form-item:last-child{
  margin-bottom: 0;
}
/deep/ .el-input__inner{
  width: 199px;
  border-radius: 8px;
}
/deep/ .el-form-item__label{
  color:#5C636C !important;
}
/deep/ .el-radio-button__inner{
      min-width: 70px;
}
/deep/ .el-radio-button:last-child .el-radio-button__inner{
    border-radius: 0 6px 6px 0;
}
/deep/ .el-radio-button:first-child .el-radio-button__inner{
    border-radius: 6px 0 0 6px;
}
 /deep/ .is_radio_show .el-radio-button__inner{
  border-radius: 6px !important;
}
/deep/ .el-form-item__error{
    padding-top: 0px;
}
/deep/ label[for="closing_date"]::after{
    content: '*';
    color: #ff3c31;
    margin-left: 4px;
}
.dualform >>> .el-form-item:last-child{
  margin-bottom: 12px;
}
.dualform >>> .el-form-item:last-child .el-form-item__content{
  margin-left: 0px !important;
}
.add-form{
  background: #FFFFFF;
  border-radius: 12px;
  color: #5C636C;
  cursor: pointer;
  font-size: 14px;
  line-height: 36px;
  justify-content: center;
}
.part_1_form{
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E8EAEC;
}
.part_2_form{
    padding: 12px;
    border-radius: 12px;
    background: #F8F8F9;
}
.part_2_inside{
    margin-bottom: 12px;
    padding: 20px;
    border-radius: 12px;
    background: #FFFFFF;
}
.part_2_form_item_title{
    border-bottom: 1px solid #F8F8F9;
    color: #191B1E;
    padding-bottom: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}
.part_title{
    color: #191B1E;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
}
.part_title[data-require]::after{
    content: "*";
    color: #F53F3F;
    margin-left: 4px;
}

.part_2{
    margin-top: 40px;
}
.date_day{
    background: #F8F8F9;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    /* padding: 6px 8px; */
    line-height: 30px;
    width: 44px;
}
.date_day_active{
    border: 1px solid #165DFF;
    background: #E0E9FF;
}


.step_box {
    height: 48px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
    padding: 0 20px;
    font-size: 14px;
    color: #616c85;
    margin-bottom: 20px;
    margin-top: 10px;
}
.step_box span {
    color: #17233d;
    max-width: 230px;
    overflow: hidden;
    height: 14px;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.demand_num {
    font-size: 14px;
    color: #b4b7bd;
}
.demand_top {
    margin-bottom: 10px;
}
.demand_item {
    padding: 10px 20px 0;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    margin-top: 12px;
}
</style>


